import React from 'react';
import { SearchPanel } from '@src/screens/project-list/search-panel';
import { List } from '@src/screens/project-list/list';
import { useDebounce, useDocumentTitle } from '@src/utils';
import { useProjects } from '@src/utils/project';
import { useUsers } from '@src/utils/user';
import { useProjectModal, useProjectsSearchParams } from '@src/screens/project-list/util';
import { ButtonNoPadding, ErrorBox, Row, ScreenContainer } from '@src/components/lib';
import { Profiler } from '@src/components/profiler';
//
//
//

// 状态提升可以让组件共享状态，但是容易造成 prop drilling

// 基本类型，可以放到依赖里；组件状态，可以放到依赖里；非组件状态的对象，绝不可以放到依赖里
// https://codesandbox.io/s/keen-wave-tlz9s?file=/src/App.js

// 使用 JS 的同学，大部分的错误都是在 runtime(运行时) 的时候发现的
// 我们希望，在静态代码中，就能找到其中的一些错误 -> 强类型
export const ProjectListScreen = () => {
  useDocumentTitle('项目列表', false);

  const { open } = useProjectModal();

  const [param, setParam] = useProjectsSearchParams();
  const { isLoading, error, data: list } = useProjects(useDebounce(param, 200));
  //
  const { data: users } = useUsers();

  //
  return (
    <Profiler id={'项目列表'}>
      <ScreenContainer>
        <Row marginBottom={2} between={true}>
          <h1>项目列表</h1>
          <ButtonNoPadding onClick={open} type={'link'}>
            创建项目
          </ButtonNoPadding>
        </Row>
        <SearchPanel users={users || []} param={param} setParam={setParam} />
        <ErrorBox error={error} />
        <List loading={isLoading} users={users || []} dataSource={list || []} />
      </ScreenContainer>
    </Profiler>
  );
};
// 调试
ProjectListScreen.whyDidYouRender = false;
